import React, { useState, useEffect } from 'react';
import { Layout, Menu, Typography, Button } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { 
  DashboardOutlined, 
  AppstoreOutlined, 
  TagsOutlined,
  DatabaseOutlined,
  HomeOutlined,
  MenuOutlined
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

const AdminLayout = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(window.innerWidth <= 768);
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => {
      const mobile = window.innerWidth <= 768;
      setIsMobile(mobile);
      if (mobile) {
        setCollapsed(true);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const menuItems = [
    {
      key: '/admin/dishes',
      icon: <DashboardOutlined />,
      label: '菜品管理',
    },
    {
      key: '/admin/categories',
      icon: <AppstoreOutlined />,
      label: '分类管理',
    },
    {
      key: '/admin/tags',
      icon: <TagsOutlined />,
      label: '标签管理',
    },
    {
      key: '/admin/init',
      icon: <DatabaseOutlined />,
      label: '数据初始化',
    },
  ];

  const handleMenuClick = ({ key }) => {
    navigate(key);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider 
        collapsible 
        collapsed={collapsed} 
        onCollapse={setCollapsed}
        theme="dark"
        breakpoint="lg"
        collapsedWidth={isMobile ? 0 : 80}
        trigger={isMobile ? null : undefined}
        style={{
          overflow: 'auto',
          height: '100vh',
          position: isMobile ? 'fixed' : 'relative',
          left: isMobile && collapsed ? '-200px' : 0,
          zIndex: isMobile ? 1001 : 'auto',
          transition: 'all 0.2s'
        }}
      >
        <div style={{ 
          height: 32, 
          margin: 16, 
          background: 'rgba(255, 255, 255, 0.3)',
          borderRadius: 6,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold'
        }}>
          {collapsed ? '🍽️' : '🍽️ 菜谱管理'}
        </div>
        <Menu
          theme="dark"
          selectedKeys={[location.pathname]}
          mode="inline"
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header style={{ 
          background: '#fff', 
          padding: '0 16px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          marginLeft: isMobile ? 0 : (collapsed ? 80 : 200),
          transition: 'margin-left 0.2s'
        }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {isMobile && (
              <Button 
                type="text" 
                icon={<MenuOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{ marginRight: 16 }}
              />
            )}
            <Title level={4} style={{ 
              margin: 0,
              fontSize: isMobile ? '16px' : '20px'
            }}>
              菜谱管理系统
            </Title>
          </div>
          <Button 
            type="text" 
            icon={<HomeOutlined />}
            onClick={() => navigate('/')}
          >
            返回前台
          </Button>
        </Header>
        <Content style={{ 
          margin: isMobile ? '16px 8px' : '24px 16px',
          padding: isMobile ? 16 : 24,
          minHeight: 280,
          background: '#fff',
          borderRadius: 6,
          marginLeft: isMobile ? 8 : (collapsed ? 96 : 216),
          transition: 'margin-left 0.2s'
        }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;